import QtQuick 2.2
/**
  * 贝塞尔曲线  绘制
  */

//Canvas {
//    width: 320
//    height: 240
//    id: root

//    onPaint: {
//        var ctx = getContext("2d")
//        ctx.lineWidth = 2
//        ctx.strokeStyle = "red"
//        ctx.beginPath();
//        ctx.moveTo(0,0)
//        ctx.quadraticCurveTo(0,height-1,width-1,height-1)// 二次方贝塞尔曲线
//        ctx.stroke()
//    }

//    Text {
//        anchors.centerIn: parent
//        font.pixelSize: 20
//        text: "quadratic Bezier curve"
//    }
//}

Canvas {
    width: 320
    height: 240
    id: root

    onPaint: {
        var ctx = getContext("2d")
        ctx.lineWidth = 2
        ctx.strokeStyle = "blue"
        ctx.beginPath()
        ctx.moveTo(16, 16)
        ctx.bezierCurveTo(0, height-1, width-1, height/2, width-16, height-16)// 三次方贝塞尔曲线
        ctx.stroke();
    }

    Text {
        anchors.centerIn: parent
        font.pixelSize: 20
        text: "cubic Bezier curve"
    }

    Rectangle {
        width: 32
        height: 32
        radius: 16
        color: "green"
        id: ball

        MouseArea {
            anchors.fill: parent
            id: mouseArea
            onClicked: pathAnim.start()
        }

        PathAnimation {
            id: pathAnim
            target: ball
            duration: 3000
            anchorPoint: "16,16"
            easing.type: Easing.InCubic
            path: Path {
                startX: 16
                startY: 16
                PathCubic {
                    x: root.width - 16
                    y: root.height - 16
                    control1X: 0
                    control1Y: root.height - 1
                    control2X: root.width - 1
                    control2Y: root.height / 2
                }
            }
        }
    }
}
